 <template>
 	<uv-popup ref="popupRef" mode="center" bg-color="transparent" :overlay-style="{
      'background': `rgba(0, 0, 0,0.5)`}" @mask-click="close">
 		<view class="popup-content relative">
 			<view class="box">
 				<view class="top_img">
 					<image src="@/static/img/ticket/close.png" mode="" @click="close" />
 				</view>
 				<view class="top_cont">
 					<image class="bg_img"
 						src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F14%2Fmodal_bg.png" mode="">
 					</image>
 					<image v-if="form.status === 1" class="isPass_img"
 						src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F16%2F%E5%BE%85%E6%A0%B8%E9%AA%8C%402x.png"
 						mode="">
 					</image>
 					<image v-if="form.status === 2" class="isPass_img"
 						src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F16%2F%E5%BE%85%E6%A0%B8%E9%AA%8C%402x+%281%29.png"
 						mode="">
 					</image>
 					<image v-if="form.status === 3" class="isBack_img"
 						src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F8%2F10%2Ftuikuanzhong+%281%29%402x.png"
 						mode="">
 					</image>
 					<image v-if="form.status === 4" class="isPass_img"
 						src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F8%2F10%2F%E5%B7%B2%E9%80%80%E6%AC%BE+%281%29.png"
 						mode="">
 					</image>

 					<view class="form_data">
 						<view class="top_title">
 							<image
 								src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F15%2Fimage%402x.png" />
 							第七届山西文化产业博览交易会门票
 						</view>
 						<view class="buy_info">
 							<view class="">
 								<view class="">
 									购票人：{{form.name}}
 								</view>
 								<view class="">
 									预留电话：{{form.mobile}}
 								</view>
 							</view>
 						</view>
 						<view class="b_info">
 							<view class="">
 								<text>订单编号</text>
 								<text>{{form.orderCode}}</text>
 							</view>
 							<view class="">
 								<text>下单时间</text>
 								<text>{{form.orderTime}}</text>
 							</view>
 							<view class="">
 								<text>购票金额</text>
 								<text>￥{{form.money}}</text>
 							</view>
 							<view v-if="form.status === 3" class="">
 								<text>申请时间</text>
 								<text>{{form.applyBackTime}}</text>
 							</view>
 							<view v-if="form.status === 4" class="">
 								<text>退款时间</text>
 								<text>{{form.backTime}}</text>
 							</view>
 						</view>
 					</view>

 					<view :class="form.status===1?'t_btn':'t_btn no_btn' " @click="handleHome">
 						<template v-if="form.status === 1">确认核验</template>
 						<template v-if="form.status === 2">禁止重复核验</template>
 						<template v-if="form.status === 3">退款中</template>
 						<template v-if="form.status === 4">已退款</template>
 					</view>
 				</view>
 			</view>
 		</view>
 	</uv-popup>
 </template>


 <script>
 	import {
 		verTick
 	} from "@/api/app/index"
 	export default {
 		data() {
 			return {
 				form: {}
 			}
 		},
 		// created() {
 		// 	var that = this
 		// 	that.$nextTick(() => {
 		// 		that.$refs.popupRef.open('center')
 		// 	})
 		// },

 		methods: {
 			open() {
 				this.$refs.popupRef.open('center')
 				this.$emit('onOpen')
 			},
 			close() {
 				this.$refs.popupRef.close()
 				this.$emit('onClose')
 			},

 			handleHome() {
 				if (this.form.status === 1) {
 					verTick({
 						tickId: this.form.tickId
 					}).then(res => {
 						if (res.code === 200) {
 							uni.showToast({
 								title: '核验成功',
 								icon: 'success'
 							})
 							this.$refs.popupRef.close()
 							this.$emit('closePass')
 						}
 					})
 				}
 			},
 		}
 	}
 </script>


 <style lang="scss" scoped>
 	.box {
 		width: 672rpx;
 		height: auto;
 		border-radius: 16rpx;
 		overflow: hidden;
 	}

 	.top_img {
 		width: 100%;
 		height: 120rpx;
 		text-align: right;
 	}

 	.top_img image {
 		width: 120rpx;
 		height: 120rpx;
 		cursor: pointer;
 	}

 	.top_cont {
 		width: 100%;
 		height: auto;
 		border-radius: 16rpx;
 		position: relative;
 		background: linear-gradient(180deg, #E3EEFF 0%, #FBFBFF 100%);
 		overflow: hidden;
 	}

 	.bg_img {
 		width: 304rpx;
 		height: 304rpx;
 		position: absolute;
 		top: 0;
 		right: 0;
 		z-index: 1;
 	}

 	.isPass_img {
 		width: 162rpx;
 		height: 146rpx;
 		position: absolute;
 		top: 32rpx;
 		left: 24rpx;
 	}

 	.isBack_img {
 		width: 162rpx;
 		height: 123rpx;
 		position: absolute;
 		top: 50rpx;
 		left: 24rpx;
 	}

 	.t_btn {
 		width: calc(100% - 48rpx);
 		height: 82rpx;
 		margin-left: 24rpx;
 		margin-right: 24rpx;

 		border-radius: 76rpx;
 		background: #438DFF;
 		margin-bottom: 42rpx;

 		font-family: Source Han Sans;
 		font-size: 32rpx;
 		font-weight: 500;
 		color: #FFFFFF;

 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}


 	.form_data {
 		width: calc(100% - 48rpx);
 		height: auto;
 		border-radius: 26rpx;
 		background: #F5F9FB;
 		box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
 		margin-bottom: 40rpx;
 		list-style: none;
 		padding: 32rpx;
 		box-sizing: border-box;
 		margin: 160rpx 24rpx 46rpx 24rpx;
 	}

 	.top_title {
 		width: 100%;
 		height: auto;
 		overflow: hidden;
 		display: flex;
 		align-items: center;
 		justify-content: center;

 		font-family: Source Han Sans;
 		font-size: 32rpx;
 		color: #3D3D3D;
 		margin-bottom: 20rpx;
 	}

 	.top_title image {
 		width: 62rpx;
 		height: 62rpx;
 		margin-right: 6rpx;
 	}

 	.buy_info {
 		width: 100%;
 		height: 162rpx;
 		font-family: Source Han Sans;
 		font-size: 28rpx;
 		color: rgba(0, 0, 0, 0.7);
 		margin-bottom: 28rpx;
 	}

 	.buy_info>view {
 		width: 100%;
 		height: 100%;
 		border-radius: 26rpx;
 		background: #FFFFFF;
 		box-shadow: inset 0px 0px 2rpx 0px rgba(0, 0, 0, 0.2);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 	}

 	.buy_info>view>view:first-child {
 		margin-bottom: 18rpx;
 	}

 	.b_info {
 		width: 100%;
 	}

 	.b_info>view {
 		width: 100%;
 		margin-bottom: 12rpx;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;

 		font-family: Source Han Sans;
 		font-size: 24rpx;
 	}

 	.b_info>view:last-child {
 		margin-bottom: 0;
 	}

 	.b_info>view text:first-child {
 		color: rgba(0, 0, 0, 0.4);
 	}

 	.b_info>view text:last-child {
 		color: rgba(0, 0, 0, 0.7);
 	}

 	.no_btn {
 		background: rgba(0, 0, 0, 0.4);
 		color: #FFFFFF;
 	}
 </style>